<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>weatherapp</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
</head>
<body>
  <header>
     <h1>HelloWeather</h1>
     <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">Weather</a></li>
            <li><a href="">Posts</a></li>
            <li><a href="">Locations</a></li>
        </ul>
     </nav>
       <div class="humberg-menu">
        <i class="uil uil-bars"></i>
       </div>
       <div class="menu-content ">
        <li><a href="">Home</a></li>
        <li><a href="">Weather</a></li>
        <li><a href="">Posts</a></li>
        <li><a href="">Locations</a></li>
       </div>
  </header>
  <div class="input-section">
    <div class="search-bar">
      <input type="text" class="input-city" placeholder="Enter City Name Here">
      <i class="uil uil-search city-submit"></i>
    </div>

    <div class="separator"></div>
    <button type="submit" class="input-location">Use current location</button>
     
  </div>
   <div class="current-weather-section">

    <div class="current-weather-card">
       
    </div>
    <div class="container">
      <h2 class="hourly-heading">Today's highlight</h2>
      <p class="hourly-des">"Today's weather update will be provided every 3 hours, keeping you informed throughout the day."
</p>
      <div class="swiper mySwiper">
        <div class="swiper-wrapper" id="hourly-section">
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
</div>
 <div class="weakly-weather-section">
     <h1>5 Days Weather Forecast</h1>
      <div class="swiper mySwiper">
      <div class="swiper-wrapper"  id="weakly-weather-container">
      </div>
       <div class="swiper-pagination"></div>
      </div>
     </div>
    <footer>
     <div class="footer-container">
       <div class="company">
         <h2>Company</h2>
         <ul>
          <li><a href="">News</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
          <li><a href="">Photos</a></li>
         </ul>
       </div>
       <div class="reference">
         <h2>Reference</h2>
         <ul>
          <li><a href="">Legend</a></li>
          <li><a href="">Blog</a></li>
          <li><a href="">Article</a></li>
         </ul>
       </div>
       <div class="support">
        <h2>Support</h2>
         <div class="mobile">
          <i class="uil uil-phone-pause"></i>
          <h3>1800-290-190</h3>
         </div>
         <div class="mail">
          <i class="uil uil-envelope-alt"></i>
          <p>support@example.com</p>
         </div>
       </div>
       <div class="getApp">
        <h2>Apps & Downloads</h2>
           <ul>
            <li><a href="">Android</a></li>
            <li><a href="">iOS</a></li>
           </ul>
       </div>

     </div>
     <hr class="hr1">
     <p class="cpy">2023-2023 © HelloWeather. All rights reserved</p>
    </footer>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
    <script src="js/weather.js"></script>
    <script src="test.js"></script>
</body>
</html>